<template>
    <el-container>
        <el-main style="height: 100%;width: 80%;margin: 3% 12% 0;overflow: hidden">
            <div style="height:100%;width:100%;text-align:left;">
                <el-table :data="tableData" style="overflow: auto;height: 100%" id="monitorTable">
                    <el-table-column
                            prop="name"
                            label="服务名称"
                            width="250"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="服务URL"
                            width="350"
                            align="center">
                    </el-table-column>
                    <!--在表格内转换形式 formatter-->
                    <el-table-column
                            prop="publicTime"
                            label="发布时间"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="extent"
                            label="空间范围"
                            width="280"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column width="200" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    title="信息查看"
                                    icon="el-icon-info"
                                    @click="showInfo(scope.$index,scope.row)"
                                    type="text">
                            </el-button>
                            <el-button
                                    title="删除"
                                    icon="el-icon-delete"
                                    @click="deleteService(scope.$index,scope.row)"
                                    type="text">
                            </el-button>
                            <el-button
                                    title="地图服务上图"
                                    icon="el-icon-circle-plus"
                                    @click="mapService(scope.$index,scope.row)"
                                    type="text">
                            </el-button>

                            <!--<el-button-->
                                    <!--title="取消服务上图"-->
                                    <!--icon="el-icon-remove"-->
                                    <!--@click="mapServiceDelete(scope.$index,scope.row)"-->
                                    <!--type="text">-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div ref="basicMapbox" id="map" style="height: 300px;display: none"></div>
            </div>
        </el-main>
        <el-footer style="text-align: center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=pageNo
                    :page-sizes="[8, 16, 24, 32]"
                    :page-size=pageSize
                    background
                    layout="prev, pager, next"
                    :total=totalCount>
            </el-pagination>
        </el-footer>
        <personal-service-dialog></personal-service-dialog>
        <map-service-dialog></map-service-dialog>
        <!--<service-to-map-dialog></service-to-map-dialog>-->
    </el-container>

</template>

<script>
    import personalServiceDialog from '../project/personalServiceDialog'
    // import serviceToMapDialog from '../project/serviceToMapDialog'
    import mapServiceDialog from '../space/mapServiceDialog'
    import mapboxgl from "mapbox-gl"
    import MapboxLanguage from '@mapbox/mapbox-gl-language'
    import 'mapbox-gl/dist/mapbox-gl.css'

    export default {
        name: "personalService",
        components: {
            personalServiceDialog,
            mapServiceDialog
            // serviceToMapDialog
        },
        data() {
            return {
                tableData: [],
                pageNo: 1,
                pageSize: 8,
                totalCount: 0,
                map: {}
                // mapVisible:false
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.getService();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getService();
            },
            showInfo(index, row) {
                let that = this;
                let url = that.$URL.mapServieceInfo + row.id;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        let info = {
                            url: url,
                            visible: true
                        }
                        that.$Bus.$emit("personalServiceInfo", info)
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    that.$message.error('未获取到数据!');
                })
            },
            deleteService(index, row) {
                this.$confirm('是否删除该服务？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that=this;
                    let url = this.$URL.mapServicedelete + row.id;
                    // let url = 'http://192.168.1.5:9000/dbfg/parallel/jobs/' + row.applicationId + '/delete';
                    this.$axios.get(url).then(res => {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: res.message
                            })
                            that.getService();
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message.error('删除失败！')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            mapService(index, row) {
                let res = {
                    id: row.id,
                    url: row.url,
                    extent: row.extent,
                    visible: true
                }
                this.$Bus.$emit("mapServiceDialogVisible", res)

            },

            // mapServiceDelete() {
            //     document.getElementById('map').style.display = 'none';
            //     document.getElementById('monitorTable').style.height = '100%';
            // },
            getService() {
                let that = this;
                let url = that.$URL.getPersonalService + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        that.tableData = res.body.result;
                        that.totalCount = res.body.totalCount;
                        let rowline = 0;
                        for (let row of res.body.result) {
                            if (row.status !== "succeeded" && row.status !== "failed") {
                                let tag = rowline;
                                let superviseTimer = setInterval(function () {
                                    // i++;
                                    // let url2 = "http://localhost:9000/dbfg/personalDataset/getlogById?id=" + row.id;
                                    that.$axios.get(that.$URL.mapServieceInfo  + row.id)
                                        .then(function (res) {
                                            if (res.code === 200) {
                                                //刷新那一行的值
                                                that.tableData[tag].status = res.body.status;
                                                if (res.body.status === "succeeded") {
                                                    clearInterval(superviseTimer);
                                                }
                                            } else {
                                                that.$message({
                                                    message: '数据获取失败',
                                                    type: 'warning'
                                                });
                                            }
                                        });
                                }, 1000);
                            }
                            rowline++;
                        }

                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }

                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('未获取到数据!');
                })
            }
        },
        created() {
            this.getService();
        },
        computed: {
            mapSize() {
                let styleObj = {
                    width: this.mapWidth,
                    height: this.mapHeight
                }
                return styleObj
            }
        },
        mounted() {

        }
    }

</script>

<style>

    @import url('../../../static/css/mapbox-gl.css');
    @import url('../../../static/css/mapbox-gl-draw.css');
</style>